import React from 'react'
import GoalIcon from "../../../../../../../res/images/web/game-room/goal@2x.png";
import CIcon from "../../../../../../../res/images/web/game-room/corner@2x.png";
import YellowIcon from "../../../../../../../res/images/web/game-room/yellow card@2x.png";
import RefIcon from "../../../../../../../res/images/web/game-room/judge@2x.png";
import SwitchIcon from "../../../../../../../res/images/web/game-room/change@2x.png"
import GoalMissedIcon from "../../../../../../../res/images/web/game-room/fail@2x.png"

const TLiveTeamMsg = props => {

    const {
        data,
        type,
        position,
    } = props

    // console.log(type)

    const colorMapper = {
        1: '#213A4B',
        2: '#FFA500'
    }

    const iconMapper = {
        1: GoalIcon,
        2: CIcon,
        3: YellowIcon,
        4: RefIcon,
        9: SwitchIcon,
        16: GoalMissedIcon,
    }

    const icon = iconMapper[type] ? iconMapper[type] : RefIcon

    return <div
        style={{
            backgroundColor: '#fff',
            padding: '8px 10px',
            margin: '8px 0',
            borderLeft: `2px solid ${colorMapper[position]}`,
        }}
        className='flex-align-center'
    >
        <div
            style={{
                height: '24px',
                width: '24px',
                borderRadius: '50%',
                backgroundColor: '#F8F8F8',
                marginRight: '8px',
            }}
            className='flex-center-align-center'
        >
            <img alt='' src={icon} style={{width: 24, height: 24,}}/>
        </div>
        <p style={{width: '80%', lineHeight: '20px',}}>{data}</p>
    </div>

}
export default TLiveTeamMsg
